<template>
	<view class="develop-pop" id="popAll" :style="{pointerEvents:(show&&maskCloseAble)?'fill':'none'}"
		@click="handlePopClick">
		<view class="dev-content"
			:style="{height:popHeigh+'rpx',bottom:show?'0rpx':-popHeigh-70+'rpx',position:'absolute'}">

			<view class="dev-inner" @click="close">
				<view class="top-tab" @click.stop>
					<view class="tab-item" :class="{'act-tab-item':type=='up'}" @click="handleTabClick('up')">
						<text v-if="!isNeedBreak">升 级</text>
						<text v-if="isNeedBreak">突 破</text>
					</view>
					<view class="tab-item" :class="{'act-tab-item':type=='adv'}" @click="handleTabClick('adv')">进 阶
					</view>
				</view>
				<view class="level-box" @click.stop>
					<view class="level-text">
						<view class="level-icon" style="opacity: 0;">
							<view class="point-one"></view>
							<view class="point-two"></view>
						</view>
						<view class="text-content">
							Lv.
							<text class="level-number">{{level}}</text>
							/<text>{{totalLevel}}</text>
						</view>
					</view>
					<view class="level-progress">
						<view class="progress-content">
							<view class="top-text">{{nowPercent}}/{{totalPercent}}</view>
							<view class="bottom-progress">
								<view class="inner-content"
									:style="{width:(nowPercent/totalPercent).toFixed(2)*100+'%'}"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="attr-box" @click.stop>
					<view class="attr-item" v-for="(item,index) in attrList" :key="index">
						<view class="attr-icon">
							<image class="icon-img" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="arrt-label">
							{{item.name}}
						</view>
						<view class="attr-now-number">
							{{item.num}}
						</view>
						<view class="attr-feature-number"
							:class="{'attr-feature-number-bigger':item.featureNum>item.num}">
							<image v-if="item.featureNum<=item.num" class="bigger-icon"
								src="https://cdn.osisx.com/6de6d62de493ba091a6bcf0f5f1e355d/image/f0b452cf723543e8b00b1a5803e923bb.png"
								mode="aspectFill"></image>
							<image v-else class="bigger-icon"
								src="https://cdn.osisx.com/6de6d62de493ba091a6bcf0f5f1e355d/image/76fc747cfb6f4ecb81f9c3b2086d0197.png"
								mode="aspectFill"></image>
							{{item.featureNum}}
						</view>
					</view>




				</view>
				<view class="control" @click.stop>
					<view class="left-consume">
						<view class="top-tip">
							<view class="icon"></view>
							<view class="tip-content">

								<text v-if="type=='up'&&!isNeedBreak">升级</text>
								<text v-if="type=='up'&&isNeedBreak">突破</text>
								<text v-if="type=='adv'">进阶</text>

								<text>消耗材料</text>
							</view>
						</view>
						<view class=" bottom-consume-list" v-if="type=='up'">
							<view class="consume-item" v-for="(item,index) in updateNeedList" :key="index">
								<image class="bottom-consume-icon" :src="item.image" mode="aspectFill"></image>
								<view class="bottom-consume-num" :class="{'num-none':!item.num}">{{item.num}}
								</view>
							</view>
						</view>
						<view class="bottom-consume-list" v-if="type=='adv'">
							<view class="consume-item" v-for="(item,index) in advNeedList" :key="index">
								<image class="bottom-consume-icon" :src="item.image" mode="aspectFill"></image>
								<view class="bottom-consume-num" :class="{'num-none':!item.num}">
									<text class="now-number">{{item.num}}</text>
									<text>/</text>
									<text class="total-number">{{item.total}}</text>

								</view>
							</view>
						</view>
					</view>
					<view class="right-btn">
						<view class="top-box">
						</view>
						<view class="bottom-box" v-if="type=='up'">
							<view class="btn-content" v-if="!isNeedBreak" @click="handleUpdate"
								:class="{'isSlace':isBtnClick}">
								<view class="inner-content">
									提升一级
								</view>
							</view>
							<view class="btn-content break-btn" @click="handleUpdate" v-else
								:class="{'isSlace':isBtnClick}">

								<view class="inner-content">
									突 破
								</view>
							</view>
						</view>
						<view class="bottom-box" v-else>
							<view class="btn-content" @click="handleUpdate" :class="{'isSlace':isBtnClick}">
								<view class="inner-content">
									进 阶
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>





		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from "vuex";
	export default {
		props: {
			storyId: {
				type: String,
				default: ""
			},
			popHeigh: {
				type: [Number, String],
				default: 580
			},
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			startShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isBtnClick: false,
				show: false,
				advNeedList: [{
						name: "碎片",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b55b7febf051447fbfac4e66aaa38f71.png",
						total: 30
					},

				],
				updateNeedList: [{
						name: "金币",
						num: 1000,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png"
					},
					{
						name: "经验币",
						num: 20,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png"
					},
					{
						name: "物品3",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png"
					},
					{
						name: "物品四",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png"
					},
				],
				attrList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8c2c36941572456a978ad6fbcad45602.png",
						num: 3386,
						featureNum: 3439,
						name: "技巧",
						attr: 'dance'
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f45ddb7cfaa4dca900ae631ae73960d.png",
						num: 84,
						featureNum: 85,
						name: "人气",
						attr: 'popular'
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9a7b4e11f4c24ee3ac8e913d769ec98f.png",
						num: 3000,
						featureNum: 3260,
						name: "魅力",
						attr: 'criticalStrike'
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b1d127e33c842758314b4ca50ec3d58.png",
						num: 186,
						featureNum: 189,
						name: "防御",
						attr: 'defense'
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5278df2eb9d748fa82c75e44b0658f93.png",
						num: 0.35,
						featureNum: 0.35,
						name: "暴击",
						attr: 'criticalStrike'
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1dc381c5d77248339b072a0c8c81aa45.png",
						num: 0.25,
						featureNum: 0.28,
						name: "爆伤",
						attr: 'criticalStrike'
					},

				],
				nowPercent: 39,
				totalPercent: 520,
				level: 39,
				totalLevel: 40,
				type: 'up', //up 升级 每十级进阶一次 adv 进阶
				consumeList: [{
						name: "金币",
						image: "",
						number: 2000
					},
					{
						name: "经验币",
						image: "",
						number: 1000
					},
					{
						name: "消耗物品3",
						image: "",
						number: 500
					},
					{
						name: "消耗物品4",
						image: "",
						number: 700
					},

				],
			}
		},
		computed: {
			...mapGetters(["globalGameCtx", "curStoryId"]),
			isNeedBreak() {

				return this.level == this.totalLevel
			}

		},
		watch: {
			// curStoryId: {
			// 	handler(newVal, oldVal) {
			// 		if (newVal === this.storyId) {
			// 			let storyData = this.globalGameCtx.nextStorySet[newVal]

			// 		}
			// 	},
			// 	deep: true,
			// 	immediate: true
			// },
			startShow: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.show = true
					}
				},
				deep: true,
				immediate: true
			},
			show: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit("show")
					} else {
						this.$emit("close")
					}
				},
				deep: true,
				immediate: true
			},
			isNeedBreak: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit("btnNameChange", "突 破")
					} else {
						this.$emit("btnNameChange", "升 级")
					}
				},
				deep: true,
				immediate: true
			}


		},
		mounted() {
			// 测试时用，之后再获取dataList时调用一次即可
			// this.handleGetRoleData()
			// this.getProps()
		},
		methods: {
			getRandomBetween(min, max) {
				// 检查参数是否为整数
				const isInteger = Number.isInteger(min) && Number.isInteger(max);

				// 生成随机数
				const random = Math.random() * (max - min) + min;

				// 如果是整数，返回整数随机数，否则返回小数随机数，保留两位小数
				return isInteger ? Math.floor(random) : parseFloat(random.toFixed(2));
			},
			handleUpdate() {
				this.isBtnClick = true
				let skillAdd = this.getRandomBetween(80, 200)
				let pAdd = this.getRandomBetween(10, 100)
				let mAdd = this.getRandomBetween(50, 100)
				let fAdd = this.getRandomBetween(2, 10)
				let bjAdd = this.getRandomBetween(0.01, 0.03)
				let bsAdd = this.getRandomBetween(0.01, 0.03)

				let arr = [skillAdd, pAdd, mAdd, fAdd, , bsAdd]

				this.attrList = this.attrList.map((item, index) => {
					if (index < 4) {
						item.num = item.featureNum
						item.featureNum = item.featureNum + arr[index]
					} else {
						item.num = item.featureNum
						item.featureNum = parseFloat(Number(item.featureNum + 0.01).toFixed(2))
					}

					return item
				})

				this.level++

				this.nowPercent = this.totalPercent
				setTimeout(() => {
					this.nowPercent = 0
					this.totalPercent = this.totalPercent + 100

					if (this.level > this.totalLevel) {
						this.totalLevel = (parseInt(this.level / 10) + 1) * 10
					}
					this.isBtnClick = false
				}, 100)

			},
			handleTabClick(e) {
				this.type = e
				console.log("当前类型", e);
			},

			handlePopClick(e) {
				if (e.target.id == "popAll" && this.maskCloseAble) {
					this.show = false
					this.$emit("close")
				}
			},

			getProps() {

			},


			open(type) {
				this.show = true
				this.type = type
			},
			close() {
				if (this.maskCloseAble) {
					this.show = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.develop-pop {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 999999999999;
		pointer-events: fill;
		overflow: hidden;

		.dev-content {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			transition: bottom 0.3s;
			pointer-events: fill;
			box-sizing: border-box;
			// padding: 0rpx 15rpx;

			.dev-inner {
				position: absolute;
				width: 100%;
				height: 100%;
				// background-color: rgba(0, 0, 0, 0.3);
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, .8) 100%);
				border-radius: 5rpx;
				display: flex;
				justify-content: flex-end;
				flex-direction: column;
				padding-bottom: 50rpx;

				.top-tab {
					position: absolute;
					left: 0rpx;
					top: -70rpx;
					width: 100%;
					height: 70rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					box-sizing: border-box;
					padding: 0rpx 35rpx;
					display: none;

					.tab-item {
						position: relative;
						width: 200rpx;
						height: 100%;
						margin-right: 20rpx;
						font-size: 30rpx;
						color: #fff;
						font-weight: 700;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: rgba(0, 0, 0, .1);
						box-sizing: border-box;
						border: 2rpx solid transparent;
						border-bottom: none;
						border-radius: 5rpx 5rpx 0rpx 0rpx;
					}

					.act-tab-item {
						border-color: rgba(255, 255, 255, .2);
					}


				}

				.level-box {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-bottom: 2rpx solid rgba(255, 255, 255, .2);



					.level-text {
						width: 230rpx;
						height: 100%;
						font-size: 24rpx;
						color: #fff;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.level-icon {
							width: 25rpx;
							height: 50rpx;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
							align-items: center;
							opacity: 0;

							.point-one,
							.point-two {
								width: 6rpx;
								height: 6rpx;
								border-radius: 50%;
							}

							.point-one {
								background-color: #d1a187;
								box-shadow: 0rpx 0rpx 10rpx #fff;
								margin-bottom: 10rpx;
							}

							.point-two {
								background-color: #a4a1b9;
								box-shadow: 0rpx 0rpx 10rpx #fff;

							}

						}

						.text-content {
							height: 50rpx;

							.level-number {
								font-size: 45rpx;
								font-weight: 700;
								line-height: 60rpx;
								color: #fff;
								margin-left: 10rpx;
								margin-right: 10rpx;
							}
						}

					}

					.level-progress {
						flex: 1;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						padding-right: 20rpx;

						.progress-content {
							width: 100%;
							height: 50rpx;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
							align-items: right;


							.top-text {
								font-size: 20rpx;
								line-height: 20rpx;
								text-align: right;
								color: #fff;
								margin-bottom: 10rpx;
							}

							.bottom-progress {
								position: relative;
								width: 100%;
								height: 10rpx;
								background-color: rgba(0, 0, 0, .3);
								margin-bottom: 8rpx;

								.inner-content {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									height: 100%;
									background-color: #ffe392;
									box-shadow: 0rpx 0rpx 4rpx #fff;
									transition: all 0.1s;
								}
							}

						}
					}
				}

				.attr-box {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					box-sizing: border-box;
					padding: 0rpx 20rpx;
					margin-top: 10rpx;


					.attr-item {
						width: 50%;
						height: 50rpx;
						font-size: 24rpx;
						color: #d2ccd6;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.attr-icon {
							width: 25rpx;
							height: 25rpx;
							margin-right: 15rpx;

							.icon-img {
								width: 100%;
								height: 100%;
							}
						}

						.arrt-label {
							margin-right: 25rpx;
						}

						.attr-now-number {
							width: 90rpx;
						}

						.attr-feature-number {
							height: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.bigger-icon {
								width: 20rpx;
								height: 20rpx;
								margin-right: 15rpx;
							}
						}

						.attr-feature-number-bigger {
							color: #f1cd92;
						}
					}

				}

				.control {
					width: 100%;
					height: 165rpx;
					margin-top: 28rpx;
					box-sizing: border-box;
					padding: 0 20rpx;
					display: flex;
					justify-content: flex-start;


					.left-consume {
						flex: 1;
						height: 100%;
						// background-color: pink;

						.top-tip {
							width: 100%;
							height: 40rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.icon {
								width: 5rpx;
								height: 20rpx;
								background-color: #d2ccd6;
								margin-right: 10rpx;
							}

							.tip-content {
								font-size: 24rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								line-height: 24rpx;
								color: #d2ccd6;


							}




						}

						.bottom-consume-list {
							width: 100%;
							height: 100rpx;
							margin-top: 20rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.consume-item {
								position: relative;
								width: 100rpx;
								height: 100rpx;
								margin-right: 10rpx;
								background-color: #cfcfcf;
								background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(223, 224, 225, .1) 50%, rgba(255, 255, 255, 1) 100%);
								border-radius: 5rpx;
								overflow: hidden;

								&:last-child {
									margin-right: 0rpx;
								}

								.bottom-consume-icon {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									z-index: 1;

								}

								.bottom-consume-num {
									position: absolute;
									right: 0rpx;
									bottom: 0rpx;
									width: 100%;
									height: 25rpx;
									font-size: 20rpx;
									color: #605e61;
									text-align: right;
									line-height: 25rpx;
									background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
									box-sizing: border-box;
									padding-right: 10rpx;
									font-weight: 700;
									overflow: hidden;
									z-index: 2;
								}

								.num-none {
									color: #d26068;
								}

								.total-number {
									color: #605e61;
								}
							}
						}
					}

					.right-btn {
						width: 250rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;

						.top-box {
							width: 100%;
							height: 60rpx;
						}

						.bottom-box {
							flex: 1;
							width: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.btn-content {
							// width: 210rpx;
							// height: 50rpx;
							// border-radius: 30rpx;
							// background-color: #f8efe0;
							// color: #715a52;
							// font-size: 30rpx;
							// line-height: 50rpx;
							// display: flex;
							// justify-content: center;
							// align-items: center;
							// font-weight: 700;
							// box-shadow: 0rpx 0rpx 10rpx #fff;
							width: 180rpx;
							height: 60rpx;
							margin-right: 20rpx;
							font-size: 24rpx;
							line-height: 60rpx;
							background-color: transparent;
							border-radius: 5rpx;
							box-shadow: 0rpx 0rpx 4rpx #fff;
							box-sizing: border-box;
							padding: 2rpx;

							.inner-content {
								width: 100%;
								height: 100%;
								background-color: #f8efe0;
								color: #715a52;
								// font-weight: 700;
								border-radius: 5rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}


						}

						.isSlace {
							animation: scaleAni 0.1s linear;
						}

						@keyframes scaleAni {
							0% {
								transform: scale(1);
							}

							50% {
								transform: scale(1.05);
							}

							100% {
								transform: scale(1);
							}
						}

						.break-btn {
							.inner-content {
								background-color: #fcd593;
								color: #715023;
							}

						}
					}
				}
			}


		}


	}
</style>